import 'package:flutter/material.dart';

import 'TextField/node1_base.dart';
import 'TextField/node2_cursor.dart';
import 'TextField/node3_decoration.dart';
import 'TextFormField/node1_base.dart';

class TextFieldDemoPage extends StatefulWidget {
  TextFieldDemoPage({Key? key}) : super(key: key);

  _TextFieldDemoPageState createState() => _TextFieldDemoPageState();
}

class _TextFieldDemoPageState extends State<TextFieldDemoPage> {
  var _username = new TextEditingController(); //初始化的时候给表单赋值
  var _password;

  @override
  void initState() {
    super.initState();
    _username.text = '初始值';
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('TextField 文本框'),
        ),
        body: ListView(
          padding: EdgeInsets.all(20),
          children: [
            Column(
              children: <Widget>[
                TextDemo(),
                // 文本框值-初始化，更新，获取
                TextField(
                  decoration: InputDecoration(hintText: "请输入用户名"),
                  controller: _username, // 绑定字段
                  onChanged: (value) {
                    setState(() {
                      _username.text = value;
                    });
                  },
                ),
                SizedBox(height: 10),
                TextField(
                  obscureText: true,
                  decoration: InputDecoration(
                      hintText: "密码",
                      icon: Icon(Icons.home),
                      border: OutlineInputBorder()),
                  onChanged: (value) {
                    setState(() {
                      this._password = value;
                    });
                  },
                ),
                SizedBox(height: 40),
                Container(
                  width: double.infinity,
                  height: 40,
                  child: RaisedButton(
                    child: Text("登录"),
                    onPressed: () {
                      print(this._username.text);
                      print(this._password);
                    },
                    color: Colors.blue,
                    textColor: Colors.white,
                  ),
                ),
                SizedBox(height: 40),
                CustomTextField(),
                SizedBox(height: 40),
                CursorTextField(),
                SizedBox(height: 40),
                ComplexTextField(),
                SizedBox(height: 40),
                CustomTextFormField(),
              ],
            )
          ],
        ));
  }
}

class TextDemo extends StatelessWidget {
  const TextDemo({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        children: <Widget>[
          // 最基本的文本框
          TextField(),
          SizedBox(height: 20),
          // 类似web input框
          TextField(
            decoration: InputDecoration(
                hintText: "请输入搜索的内容", border: OutlineInputBorder()),
          ),
          SizedBox(height: 20),
          // 多行文本
          TextField(
            maxLines: 4,
            decoration: InputDecoration(
                hintText: "多行文本框", border: OutlineInputBorder()),
          ),
          SizedBox(height: 20),
          //密码框
          TextField(
            obscureText: true,
            decoration:
                InputDecoration(hintText: "密码框", border: OutlineInputBorder()),
          ),
          SizedBox(height: 20),
          TextField(
              decoration: InputDecoration(
                  border: OutlineInputBorder(), labelText: "用户名")),
          SizedBox(height: 20),
          TextField(
              obscureText: true,
              decoration: InputDecoration(
                border: OutlineInputBorder(),
                labelText: "密码",
                // labelStyle: TextStyle()
              )),
          SizedBox(height: 20),
          // 带Icon的文本框
          TextField(
              decoration: InputDecoration(
                  icon: Icon(Icons.people), hintText: "请输入用户名")),
        ],
      ),
    );
  }
}
